<template>
        <div>
            <input type="text" v-model="message" />
            <input type="text" v-model="message1" />
        </div>
        <div>{{ messageObg.nav.bar.name }}</div>
        <button @click="messageObg.nav.bar.name = '改变名称'">按钮</button>
</template>
    
<script setup lang='ts'>
import { reactive, ref, watch } from 'vue';

    // watch 主要是用来监听响应式数据的变化
    /**
     * 监听ref数据
     */
    const message = ref<string>('');
    const message1 = ref<string>('');
    watch([message, message1], (newVal, oldVal) => { // 第一个参数是新的，第二个参数是上次的数据
        console.log("新的:" + newVal);
        console.log("旧的:" + oldVal);
    })

    const messageObg = reactive({
        nav: {
            bar: {
                name:'xiaoxujs'
            }
        }
    })
    watch(messageObg, (newVal, loadVal) => {
        console.log("新的:" , newVal);
        console.log("旧的:" , loadVal);
    },{
        deep:true, //深度监听， 在reactive中是默认开启， ref中是默认不开启
        immediate: true
    })
</script>
    
<style>
    
</style>
